{% extends "base.html" %}

{% block content_header %}
Add Inventory
{% endblock %}

{% block HEAD %}
<script type="text/javascript">

{% autoescape off %}
//suggestions based on where the chemical goes
var classes = [ {{ classes|join:"," }} ]
{% endautoescape %}

var prev_input = '';
var text_obj;
var list_obj;

function init() {
	window.setInterval("check_input()", 100);
	text_obj = document.getElementById("id_classification");
	list_obj = document.getElementById("id_class_list");
	filter('');
}

function check_input()
{
	var input = text_obj.value;
	if (prev_input == input) return;
	else
	{
		prev_input = input;
		filter(input);
	}
}

function changeAction(addmore) {
	document.getElementById('add_more').value = addmore;
	document.getElementById('addform').submit();
}

function filter(ex) {
	list_obj.options.length = 0;
	ex = ex.toUpperCase();
	for (x in classes) {
		if ((ex == '') || (classes[x].toUpperCase().indexOf(ex) == 0))
		{
			var len = list_obj.options.length;
			list_obj.options[len] = new Option(classes[x],classes[x]);
		}
	}

}

function set_class()
{
	x = list_obj.selectedIndex;
	if (x > -1)
	{
		prev_input = list_obj[x].value;
		text_obj.value = list_obj[x].value;
	}
}
</script>

<STYLE TYPE="text/css">
<!--
.output
{
	width:40%;
	float:left;
	margin-left: 10px;
	display:inline-block;
}

.formcls
{
	width:50%;
	float:left;
	display:inline-block;
	margin-right: 10px;
}
-->
</STYLE>
{% endblock %}

{% block BODYTAGS %}
onload="init();"
{% endblock %}

{% block content %}
	{% if form.errors %}
		<p style="color:red;">Please correct the error{{ form.errors|pluralize}} below.</p>
	{% endif %}
	<div class="formcls">
	<form id="addform" action="" method="post" width=60%>{% csrf_token %}
		<table>
			{{ form.as_table }}
		</table>
		<input type="hidden" id="add_more" name="add_more" value="false">
		{% ifequal action 'edit' %}
		<input type="submit" value="Update" onclick="changeAction('f');">
		{% else %}
		<input type="submit" value="Add More" onclick="changeAction('t');"> | 
		<input type="submit" value="Add" onclick="changeAction('f');">
		{% endifequal %}
	</form>
	</div>
	<div class="output" id="output">Known classifications:<br><select id="id_class_list" size="10" style="width:150px" onclick="set_class()"><option>hello</option></select></div>
{% endblock %}